<template>
  <div >
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 上传按钮 -->

      <el-row>
        <el-col>
          <el-button @click=" showuploadDiaolog">上传图片</el-button>
        </el-col>
      </el-row>
      <el-table :data=" imglist" border stripe>
        <el-table-column type="index"></el-table-column>

        <el-table-column label="轮播图">
          <template slot-scope="scope">
            <img :src="scope.row.url" alt class="imgsize" />
          </template>
        </el-table-column>
         <el-table-column label="操作">
          <template slot-scope="scope">
           <el-button type='danger' @click="deleteimg(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 上传对话框 -->
    <el-dialog title="添加角色" :visible.sync="uploadialogVisible" width="50%" @close="addClose">
    
<input class="imgFile" type="file" @change="addPhoto" ref="test">
      <el-row>
        <img :src="imgUrl" alt v-show="showWantImg===true" class="wantImg" />
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addClose">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imglist: [],
      uploadialogVisible: false,
      uploadPhotos: '',
      imgUrl: "",
      showWantImg: false,
    };
  },
  created() {

    this.getimginfo();
  },
  methods: {
    async getimginfo() {
      const res = await this.$http.get("/activity");
      this.imglist = res.data.data;
     
    },
    showuploadDiaolog() {
    
      this.uploadialogVisible = true;
     
    },
 async   upload() {
      if(this.uploadPhotos===''){
        return this.$message.info('请选择图片')
      }
      const formData = new FormData();
       formData.append("img",this.uploadPhotos);
       console.log(this.uploadPhotos,'1111');
      console.log(formData);
   const res=  await this.$http.post("/activity/upload",formData);
    console.log(res);
    this.addClose()
      this.getimginfo();
    },
    addPhoto(e) {
     
      this.uploadPhotos = e.target.files[0];
      // console.log(this.uploadPhotos);
      const render = new FileReader();

      render.onload = () => {
        this.imgUrl = render.result;
      };
      render.readAsDataURL(this.uploadPhotos);
      this.showWantImg = true;
    },
    addClose() {
      this.$refs.test.type='text'
       this.$refs.test.type='file'
      this.  uploadPhotos=''
      this.uploadialogVisible = false;
      this.showWantImg = false;
        
    },
 async   deleteimg(id){
      console.log(id);
            //弹框询问是否删除
      const confirmResult = await this.$confirm(
        "此操作将永久删除该图片, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      //如果用户点击确定，返回字符串confirm
      //取消删除。返回字符串cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      //  const {data:res}= await this.$http.delete('users/'+id)
      const res = await this.$http.delete("/activity/" + id);
      console.log(res);
      //  if(res.meta.status!==200){
      //    return this.$message.error('删除失败')
      //  }
      this.$message.success("删除成功");
      this.getimginfo();
    }
  },
};
</script>
<style lang="less" scoped>
.imgsize {
  width: 15vw;
  height: 10vh;
}
.wantImg {
  width: 40vw;
  height: 30vh;
}
</style>